<!DOCTYPE html>
<html
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org"
        layout:decorate="~{base/layout}">

<div layout:fragment="content">
  <!--med_tittle_section-->
  <div class="med_tittle_section">
    <div class="med_img_overlay"></div>
    <div class="container">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <div class="med_tittle_cont_wrapper">
            <div class="med_tittle_cont">
              <ol class="breadcrumb">
                <li><a th:href="@{/}">村务公开</a></li>
                <li><a th:href="@{/}">民事直说</a></li>
              </ol>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="page-container">
    <div class="container">
      <div class="row med_toppadder50 med_bottompadder50">
        <div class="page_tab">
          <div class="main_con tab_a">
            <ul class="tab_con fixed tab1">
              <a th:href="@{/village/feedback/reportUI}"><li>检举控告</li></a>
              <li class="on">群众诉求</li>
              <a th:href="@{/village/feedback/proposalUI}"><li>批评建议</li></a>
            </ul>
          </div>
        </div>
        <form id="reportInfo" name="reportInfo" method="post" enctype="multipart/form-data">
          <div class="left page_main">
            <div class="left page_main_bg">
              <div class="left fj_form_con">
                <div class="left form_title">
                  <!--                                    <div class="left form_title_nm" style="width: 220px;">-->
                  <div class="iconfont-feedback icon-shuiwuganbuweijijubao" style="width: 300px;">
                    <span><i style="color: #db905b;font-size: 28px;" th:text="'实名申诉'" ></i></span>
                  </div>

                </div>
                <!--                                第一行举报人信息-->
                <div class="left sear_table" style="margin-top: 0px;">
                  <table cellspacing="0" cellpadding="0" class="table_info">
                    <tr>
                      <td colspan="6" class="table_name">
                        申诉人信息（注意:标有
                        <font style="color: red;"> * </font>的必须填写）
                      </td>
                    </tr>
                    <tr>
                      <td class="td_name2" style="width: 90px;">
                        姓名
                      </td>
                      <td class="td_star" style="width: 15px;">
                        <font style="color: red;"> * </font>
                      </td>
                      <td class="td_info" style="width: 300px;">
                        <input type="text" name="feedbackName" maxlength="30" value=""
                               id="feedbackName" class="input_text" />
                        <!--                                                onchange="isZH_CN('userName', this.value)" onpaste="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" oncontextmenu="return false"-->
                      </td>
                      <td class="td_name2" style="width: 90px;">
                        身份证号
                      </td>
                      <td class="td_star" style="width: 15px;">
                        <font style="color: red;"> * </font>
                      </td>
                      <td class="td_info" style="width: 300px;">
                        <input type="text" name="feedbackPostcard" maxlength="18" value=""
                               id="feedbackPostcard" class="input_text" />
                      </td>

                    </tr>
                    <tr>
                      <td class="td_name2">
                        联系方式
                      </td>
                      <td class="td_star" style="width: 15px;">
                        <font style="color: red;"> * </font>
                      </td>
                      <td class="td_info">
                        <input type="text" name="feedbackTelephone" maxlength="50" value=""
                               id="feedbackTelephone" class="input_text" />
                      </td>
                      <td class="td_name2" style="width: 90px;">
                        职业
                      </td>
                      <td class="td_star" style="width: 15px;">
                        &nbsp;
                      </td>
                      <td class="td_info" style="width: 300px;">
                        <input type="text" name="feedbackPosition" maxlength="18" value=""
                               id="feedbackPosition" class="input_text" />
                      </td>

                    </tr>
                    <tr>
                      <td class="td_name2">
                        现居住地址
                      </td>
                      <td class="td_star" style="width: 15px;">
                        &nbsp;
                      </td>
                      <td class="td_info">
                        <input type="text" name="feedbackAddress" maxlength="100" value=""
                               id="feedbackAddress" class="input_text" />
                      </td>
                      <td class="td_name2">
                        政治面貌
                      </td>
                      <td class="td_star" style="width: 15px;">
                        &nbsp;
                      </td>
                      <td class="td_info">
                        <select name="feedbackPolitical" id="feedbackPolitical"
                                class="input_sele">
                          <option value="">==请选择==</option>
                          <option th:each="political:${politicalList}"
                                  th:value="${political}"
                                  th:text="${political}"></option>

                        </select>
                      </td>
                    </tr>
                    <tr>
                      <td class="td_name2">
                        诉求类型
                      </td>
                      <td class="td_star" style="width: 15px;">
                        <font style="color: red;"> * </font>
                      </td>
                      <td class="td_info">
                        <select name="complaintCategory" id="complaintCategory"
                                class="input_sele">
                          <option value="">==请选择==</option>
                          <option th:each="category:${categoryList}"
                                  th:value="${category}"
                                  th:text="${category}"></option>

                        </select>
                      </td>
                      <td class="td_name2">
                        原处理情况
                      </td>
                      <td class="td_star" style="width: 15px;">
                        <font style="color: red;"> * </font>
                      </td>
                      <td class="td_info">
                        <input type="text" name="complaintSituation" maxlength="100" value=""
                               id="complaintSituation" class="input_text" />
                      </td>
                    </tr>

                  </table>
                </div>
                <!-- 第二行诉求正文信息-->
                <div class="left sear_table">
                  <table cellspacing="0" cellpadding="0" class="table_info">
                    <tr>
                      <td colspan="5" class="table_name">
                        诉求正文（注意:标有
                        <font style="color: red;"> * </font>的必须填写）
                      </td>
                    </tr>
                    <tr>
                      <td class="td_name2" style="width: 115px;">
                        标题(最多50字)
                      </td>
                      <td class="td_star" style="width: 15px;">
                        <font style="color: red;"> * </font>
                      </td>
                      <td class="td_info" style="width: 780px;">
                        <input type="text" name="contentTitle" maxlength="50" value=""
                               id="contentTitle" class="input_text" style="width: 780px;" />
                        <!--                                                onchange="isZH_CN('reportTitle', this.value)" onpaste="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" oncontextmenu="return false"-->
                      </td>
                    </tr>
                    <tr>
                      <td class="td_name2">
                        主要问题
                        <br />
                        (最多1000字）
                        <!--  (剩余-->
                        <!-- <font style="font-weight: bolder; font-size: 17px;" id="tip"></font>字)-->
                      </td>
                      <td class="td_star" style="width: 15px;">
                        <font style="color: red;"> * </font>
                      </td>
                      <td class="td_info" style="height: 335px;">
                                                <textarea name="contentMain" cols="85" rows="20" id="contentMain"
                                                          style="flex:1; width: 780px; height:330px  !important; font-size: 15px; resize:none;"></textarea>
                      </td>
                    </tr>
                  </table>
                </div>
                <div class="left oper_box" style="margin-top: 30px; margin-bottom: 40px; margin-left: 20px;">
                  <table align="center">
                    <tr>
                      <td style="width: 100px;">
                        <input type="button" class="but_submit" value="提 交"
                               onclick="addComplaint()" />
                      </td>
                      <td style="width: 100px;">
                        <input type="reset" class="but_submit" value="重 填" />
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </form>
        <!--                </div>-->
      </div>
    </div>
  </div>
  <script th:src="@{/js/jquery_min.js}"></script>
  <script th:src="@{/js/bootstrap.min.js}"></script>
  <script th:src="@{/js/wow.min.js}"></script>
  <script th:src="@{/js/custom.js}"></script>
  <script th:src="@{/plugins/slider-pro/js/jquery.sliderPro.min.js}"></script>
  <script th:src="@{/plugins/owlcarousel/js/owl.carousel.min.js}"></script>
  <script th:src="@{/layer/layer.js}"></script>
  <script th:inline="javascript" type="text/javascript">
    function addComplaint(){
      var feedbackName = $("#feedbackName").val();
      var feedbackPostcard = $("#feedbackPostcard").val();
      var feedbackTelephone = $("#feedbackTelephone").val();
      var feedbackPosition = $("#feedbackPosition").val();
      var feedbackAddress = $("#feedbackAddress").val();
      var feedbackPolitical = $("#feedbackPolitical").val();
      var complaintCategory = $("#complaintCategory").val();
      var complaintSituation = $("#complaintSituation").val();
      var contentTitle = $("#contentTitle").val();
      var contentMain = $("#contentMain").val();

      if (feedbackName.length === 0||feedbackPostcard.length === 0||feedbackTelephone.length=== 0||complaintCategory.length === 0||complaintSituation.length === 0||contentTitle === 0||contentMain.length === 0){
        window.alert("标有 * 的问题必须填写！");
      }
      if (contentTitle.length > 50){
        window.alert("举报正文标题最多50字");
      }
      if (contentMain.length > 1000){
        window.alert("举报正文标题最多1000字");
      }
      var postcardRegex = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      if (feedbackPostcard.length != 0 && postcardRegex.test(feedbackPostcard) === false) {
        window.alert("举报人身份证号不合法，请填写正确的身份证号！")
        return false;
      }

      // 发送ajax保存举报信息
      $.ajax({
        url: "/platform/village/addComplaint",
        type: "POST",
        data:{
          "feedbackName":feedbackName,
          "feedbackPostcard":feedbackPostcard,
          "feedbackTelephone":feedbackTelephone,
          "feedbackPolitical":feedbackPolitical,
          "feedbackAddress":feedbackAddress,
          "feedbackPosition":feedbackPosition,
          "complaintCategory":complaintCategory,
          "complaintSituation":complaintSituation,
          "contentTitle":contentTitle,
          "contentMain":contentMain,
          "auditStatus":"未审理",
          "type":"群众诉求"
        },
        success: function (result) {
          if (result.code === 100) {
            // $("#userAddModal").modal('hide');
            window.alert('诉求信息发送成功！');
            setTimeout(function () {
              location.href = "/platform/village/feedback/complaintUI";
            }, 1000);
          }else if(result.code === 110){
            window.alert(result.msg);
            location.href ="/platform/loginUI";
          }else {
            window.alert('诉求信息发送失败！');
          }
        }
      })
    }
  </script>
</div>
</html>
